<template>
    <div>
        <div class="header">
            公告列表
        </div>
        <div class="top">
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
                <el-form-item label="新闻" label-width="40px">
                    <el-input v-model="query.name" placeholder="新闻名" style="width:120px" clearable></el-input>
                </el-form-item>
                <el-form-item label="公告类型">
                    <el-select v-model="query.type" placeholder="请选择" clearable style="width:130px">
                        <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left:40px">
                    <el-button type="primary" style="width:100px" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 添加/批量删除 -->
        <div style="padding:0 25px">
            <el-button type="primary" style="width:100px" @click="dialogVisible = true">添加</el-button>
            <el-button type="danger" style="width:100px">批量删除</el-button>
        </div>
        <!-- 列表 -->
        <div style="padding:20px">
            <Table :selection="selection" :tableCols="tableCols" :tableData="tableData" @pagechange="pagechange"
                :total="total">
                <!-- 类型 -->
                <template #typename="{row}">
                    <el-link type="primary" @click="details(row)">{{row.typename}}</el-link>
                </template>
                <!-- 图片 -->
                <template #picture="{row}">
                    <div v-if="row.picture!=''">
                        <el-image style="width: 50px; height: 50px;border-radius: 5px;" :src="IMGURL+row.picture"
                            fit="contain">
                        </el-image>
                    </div>
                    <div v-else>
                        暂无图片
                    </div>
                </template>
                <!-- 状态 -->
                <template #state="{row}">
                    <el-switch v-model="row.state" :active-value="1" :inactive-value="0" @change="changestate(row)"
                        active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </template>
                <!-- 操作 -->
                <template #option="{row}">
                    <el-button type="success" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" @click="del(row)">删除</el-button>
                </template>
            </Table>
        </div>
        <!-- 详情 -->
        <div>
            <Details :dialogVisibles="dialogVisibles" :handleClickdata="handleClickdata" @iscloses="iscloses"></Details>
        </div>
        <!-- 添加 -->
        <div>
            <Add :dialogVisible="dialogVisible" :handleClickdata="handleClickdata" @isclose="isclose"></Add>
        </div>
    </div>
</template>

<script>
import Table from './Table/Table.vue'
import Details from '@/components/详情/news.vue'
import Add from '@/components/add/addnews.vue'
import { newstype, newslist, newsadd } from '@/api/news'
import { IMGURL } from '@/api/config'
export default {
    components: {
        Table,
        Details,
        Add
    },
    data() {
        return {
            IMGURL: IMGURL,
            total: 0,
            dialogVisible: false,
            dialogVisibles: false,
            selection: true,
            form: {

            },
            query: {
                page: 1,
                psize: 5,
                key: ""
            },
            type: [],
            tableData: [],
            tableCols: [
                {
                    prop: "id",
                    lable: "id",
                    width: 130
                },
                {
                    lable: "类型",
                    coltype: "typename",
                    slotname: "typename"
                    // width: 100
                },
                {
                    prop: "title",
                    lable: "标题",
                    // width: 100
                },
                {
                    lable: "图片",
                    coltype: "picture",
                    slotname: "picture"
                    // width: 100
                },
                {
                    lable: "状态",
                    coltype: "state",
                    slotname: "state"
                    // width: 100
                },
                {
                    prop: "addtime",
                    lable: "发布时间",
                    // width: 100
                },
                {
                    prop: "edituser",
                    lable: "发布人",
                    // width: 100
                },
                {
                    lable: "操作",
                    coltype: "option",
                    slotname: "option"
                },
            ],
            handleClickdata: {}
        }
    },
    created() {
        // 公告类型
        this.getnewstype()
        // 公告列表
        this.getnewslist()
    },
    methods: {
        // 公告类型
        async getnewstype() {
            let res = await newstype()
            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },
        // 公告列表
        async getnewslist() {
            let res = await newslist(this.query)
            console.log(res);
            if (res.errCode == 10000) {
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },
        // 修改状态
        async changestate(val) {
            let res = await newsadd(val)
            if (res.errCode == 10000) {
                this.$message.success("修改成功")
            }
        },
        // 修改
        handleClick(val){
            this.handleClickdata = JSON.parse(JSON.stringify(val))
            this.dialogVisible = true
        },
        // 详情的
        iscloses(val) {
            this.dialogVisibles = val
        },
        // 添加的
        isclose(val, isrefresh = false, editdata = {}) {
            this.dialogVisible = val
            this.handleClickdata = editdata
            if (isrefresh) {
                this.getnewslist()
            }
        },
        // 详情
        details(val) {
            this.dialogVisibles = true
            this.handleClickdata = JSON.parse(JSON.stringify(val))
        },
        // 分页
        pagechange(val) {
            this.query = val
            this.getnewslist()
        },
        onSubmit() {
            this.getnewslist()
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}

.top {
    padding: 0 30px;
}
</style>